<template>
  <basic-container>
    <iframe :src="src" class="iframe" ref="iframeRef"/>
  </basic-container>
</template>

<script setup>
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style
import {useRoute, useRouter} from "vue-router"
import {watch, onMounted} from "vue"

defineOptions({
  name: "AvueIframe",
})

const route = useRoute()
const router = useRouter()
const iframeRef = ref()

function created() {
  NProgress.configure({showSpinner: false});
}

created()

onMounted(() => {
  load();
})

const src = computed(() => {
  return route.query.url.replace(/#/g, "&")
})

watch(route, () => {
  load();
})

// 显示等待框
function show() {
  NProgress.start();
}

// 隐藏等待狂
function hide() {
  NProgress.done();
}

// 加载组件
function load() {
  show();
  //超时3s自动隐藏等待狂，加强用户体验
  let time = 3;
  const timeFunc = setInterval(() => {
    time--;
    if (time == 0) {
      hide();
      clearInterval(timeFunc);
    }
  }, 1000);
  iframeInit();
}

//iframe窗口初始化
function iframeInit() {
  const clientHeight = document.documentElement.clientHeight - 150;
  if (!iframeRef.value) return;
  iframeRef.value.style.height = `${clientHeight}px`;
  if (iframeRef.value.attachEvent) {
    iframeRef.value.attachEvent("onload", () => {
      hide();
    });
  } else {
    iframeRef.value.onload = () => {
      hide();
    };
  }
}

</script>
<script>

export default {

  data() {
    return {};
  },

  mounted() {

  },
  watch: {},
  computed: {},
  methods: {}
};
</script>

<style lang="scss">
.iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>